<template>
  <div id="homeVideoView">
    <div id="homeTop">
      <a-space>
        <p>视频分类:</p>
        <a-tag checkable color="arcoblue" :default-checked="false" size="large"
          >Toutiao
        </a-tag>
        <a-tag checkable color="blue" :default-checked="false" size="large"
          >Awesome
        </a-tag>
        <a-tag checkable color="green" :default-checked="false" size="large"
          >Toutiao
        </a-tag>
        <a-tag checkable color="purple" :default-checked="false" size="large"
          >Lark
        </a-tag>
      </a-space>
    </div>
    <div id="homeBottom">
      <div id="bottomleft">
        <a-card hoverable :style="{ width: '650px' }">
          <template #cover>
            <div
              :style="{
                height: '400px',
                overflow: 'hidden',
              }"
            >
              <video
                id="homeVideo"
                loop
                controls
                style="width: 100%; height: 100%"
              >
                <source src="@/assets/video/heme.mp4" type="video/mp4" />
                Your browser does not support HTML5 video.
              </video>
            </div>
          </template>
          <a-card-meta title="Card Title">
            <template #description>
              Card content <br />
              Card content
            </template>
          </a-card-meta>
        </a-card>
      </div>
      <div id="bottomright">
        <a-card :bordered="false" :style="{ width: '100%', height: '80%' }">
          <a-card-grid
            v-for="(_, index) in new Array(6)"
            :key="index"
            :hoverable="index % 2 === 0"
            :style="{
              width: '29%',
              height: '250px',
              margin: '16px 16px 16px 16px',
            }"
          >
            <a-card class="card-demo" :bordered="false">
              <template #cover>
                <img
                  :style="{
                    width: '100%',
                    height: '200px',
                  }"
                  alt="dessert"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                />
              </template>
              <p :style="{ margin: 0 }">
                {{ index % 2 === 0 ? "Card allow to hover" : "Card content" }}
              </p>
            </a-card>
          </a-card-grid>
        </a-card>
      </div>
    </div>
  </div>
  <!--  <video-->
  <!--    id="homeVideo"-->
  <!--    autoplay-->
  <!--    loop-->
  <!--    controls-->
  <!--    style="width: 200px; height: 400px"-->
  <!--  >-->
  <!--    <source src="@/assets/video/heme.mp4" type="video/mp4" />-->
  <!--    Your browser does not support HTML5 video.-->
  <!--  </video>-->
</template>

<script setup lang="ts"></script>

<style scoped>
#homeVideoView {
  display: flex;
  flex-direction: column;
}

#homeTop {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  height: 50px;
}

#homeTop a-tag {
  font-size: large;
}

#homeBottom {
  margin-top: 30px;
  display: flex;
  width: 97vw;
  height: 70vh;
  align-items: center;
}

#bottomleft {
  margin-left: 5%;
  width: 40%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bottomright {
  margin-left: 2%;
  margin-right: 5%;
  width: 48%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
